import React from 'react'
import { Layout} from 'antd';
import Table from '../Table'
import Editor from "../Editor"
import {useSelector,useDispatch,connect} from 'react-redux'
import "./tr.css"

const {Content} = Layout;

const Circle = () => {
  const circleList = useSelector(state=> state.circle.circleList)
  const valueList = useSelector(state=> state.value.valueList)
  const dispatch = useDispatch()
  let value;
  
  const columns = [
    {
        title: 'key值',
        key: 'key0',
        dataIndex: 'key0',
        valueType: 'text',
    },
    {
      title: '圈子用户头像',
      key: 'userimg',
      dataIndex: 'userimg',
      valueType: 'avatar',
      hideInSearch: true
    },
    {
        title: '圈子用户名',
        dataIndex: 'username',
        key: 'username',
        ellipsis: true
    },
    {
      title: '圈子内容',
      key: 'content',
      dataIndex: 'content',
      valueType: 'text',
    },
    {
        title: '圈子图片',
        key: 'img',
        dataIndex: 'img',
        valueType: 'avatar',
        hideInSearch: true
    },
    {
      title: '圈子日期',
      key: 'time0',
      dataIndex: 'time0',
      valueType: 'text',
    },
    {
      title: '评论数',
      key: 'commun',
      dataIndex: 'commun',
      valueType: 'text',
    },
    {
      title: '点赞数',
      key: 'likemun',
      dataIndex: 'likemun',
      valueType: 'text',
    },
    {
      title: '评论',
      key: 'coms',
      dataIndex: 'coms',
      valueType: 'text',
    },
    {
      title: '用户账号',
      key: 'usernumber',
      dataIndex: 'usernumber',
      valueType: 'text',
    },
    {
      title: '是否点赞',
      key: 'islike',
      dataIndex: 'islike',
      valueType: 'text',
    },
    {
        title: '操作',
        key: 'option',
        width: 120,
        valueType: 'option',
        render: (text,record,index,action) => [<div onClick={()=>{
          dispatch({type:'get',con:record});console.log(valueList)
        }}><Editor ques={user} url="http://101.34.58.111:8081/circle"/></div>
        , <a onClick={async ()=>{
          console.log(record)
          await fetch(`http://101.34.58.111:8081/circle/${record.circle_id}`,{
          method:'delete',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
        })
        dispatch({type:'delete',content:['delete']})
        }}>删除</a>]
      }];
  const right = {}

  const user = [
    {name:'key0',label:'key值',tooltip:'最长为24位',placeholder:'请输入key值'},
    {name:'username',label:'圈子用户名',tooltip:'最长为24位',placeholder:'请输入圈子用户名称'},
    {name:'userimg',label:'圈子用户头像',placeholder:'上传头像'},
    {name:'content',label:'圈子内容',tooltip:'最长为24位',placeholder:'请输入圈子内容'},
    {name:'img',label:'圈子图片',placeholder:'上传图片'},
    {name:'time0',label:'圈子日期',tooltip:'最长为24位',placeholder:'请输入圈子日期'},
    {name:'commun',label:'评论数',tooltip:'最长为24位',placeholder:'请输入评论数'},
    {name:'likemun',label:'点赞数',tooltip:'最长为24位',placeholder:'请输入点赞数'},
    {name:'coms',label:'评论',tooltip:'最长为24位',placeholder:'请输入评论'},
    {name:'usernumber',label:'用户账号',tooltip:'最长为24位',placeholder:'请输入用户账号'},
    {name:'islike',label:'是否点赞',tooltip:'最长为24位',placeholder:'请输入是否点赞'}
]

    return (
        <Content className="site-layout-background" style={{paddingLeft: 10,margin: 0,minHeight: 280,}}>
          <Table title="圈子管理" columns={columns} right={right} url="http://101.34.58.111:8081/circle" ques={user} />
        </Content>
    )
}

export default connect()(Circle)